<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单完善</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">
    <link rel="stylesheet" href="css/wzl-bootstrap.css" />
    <link rel="stylesheet" href="css/goods.css" />
    <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <style>
        body{
            background: #fff;
        }
        .main{
            background: #f9ebdd;
        }
        .main table{
            width: 98%;
            margin-left: 2vw;
            margin-top: 2vw;
        }
        .main table tr{
            border-bottom: 1px solid #fff;
        }
        .main table td{
            padding: 2vw;
        }
        .main table input{
            border: 1px solid #e8c8a3;
            line-height: 6vw;
            padding-left: 1vw;
        }
        .tips{
            color: red;
            font-size: 12px;
        }
        .white{
            background: #fff;
            border-bottom:1px solid #f6f6f6;
        }
        .right{
            text-align: right;
        }
        .submit-btn{
            text-align: center;
            width: 90%;
            background: #e4393c;
            padding: 6px;
            font-size: 1.2em;
            color: #fff;
            letter-spacing: 5px;
            margin: 8vw auto;
            border-radius: 5px;
        }
        .red{
            color: red;
        }
    </style>
</head>
<body>
<div id="goods-nav">
    <nav class="wzl-navbar navbar-default" role="navigation" >
        <div class="container-fluid">
            <div class="navbar-header">
                <div class="wzl-nav-bar" onclick="history.back(-1)">
                    <span class="glyphicon glyphicon-wzl-back" ></span>订单完善
                </div>
            </div>
        </div>
    </nav>
</div>
<div class="main">
    <table>
        <tr>
            <td class="right">商品名称</td>
            <td class="white"><span id="desc"></span></td>
        </tr>
        <tr>
            <td class="right">数量</td>
            <td class="white"><span id="quantity"></span></td>
        </tr>
        <tr>
            <td class="right">金额</td>
            <td class="white"><span id="payMoney"></span></td>
        </tr>
        <tr>
            <td class="right">取票人姓名<span class="red">*</span></td>
            <td class="white"><input type="text" id="userName" placeholder="请输入姓名"></td>
        </tr>
        <tr>
            <td class="right">取票人身份证号码<span class="red">*</span></td>
            <td class="white"><input type="text" id="userIdCard" style="width: 100%;" placeholder="请输入身份证号码"></td>
        </tr>
        <tr>
            <td class="right">取票人手机号码<span class="red">*</span></td>
            <td class="white"><input type="number" id="userPhone" placeholder="请输入手机号码"></td>
        </tr>
        <tr>
            <td class="right" style="vertical-align: top;">游玩日期<span class="red">*</span></td>
            <td class="white">
                <input type="date" id="visiteDate" placeholder="请选择日期">
                <div class="tips">请选择近30天内可以游玩的日期<br>并准时游玩，逾期作废</div>
            </td>
        </tr>

    </table>

</div>

<div class="submit-btn" id="buy">立即购买</div>


<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/common.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
<script src="js/goods.js"></script>

<script type="application/javascript">
    var type,desc,payMoney,points,quantity;
$(function () {
     type=Common.queryGetParam("type");
     desc = decodeURIComponent(Common.queryGetParam("desc"));
     payMoney = Common.queryGetParam("payMoney");
     points = Common.queryGetParam("points");
     quantity = Common.queryGetParam("quantity");
     $("#desc").text(desc);
     $("#payMoney").text(payMoney);
     $("#quantity").text(quantity);
    //layer.alert("您选择了"+desc+":"+quantity+"张，需要支付"+payMoney);

});

//立即购买
$("#buy").on("click",function () {
    var userName = $("#userName").val();
    var userIdCard = $("#userIdCard").val();
    var userPhone = $("#userPhone").val();
    var visiteDate = $("#visiteDate").val();
    if(!userName||!userIdCard||!userPhone||!visiteDate){
        layer.msg("请将订单信息填写完整");
        return;
    }
    //身份证号码校验
    var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    if(!regIdNo.test(userIdCard)){
        layer.msg("身份证号码有误");
        return;
    }
    //手机号
    var phreg=/^[1][3,4,5,7,8][0-9]{9}$/;
    if(!phreg.test(userPhone)){
        layer.msg("手机号码有误");
        return;
    }
    //日期校验,今天之后30天
    var vDate = new Date(visiteDate);
    var now = new Date();
    var nextDate = new Date();
    nextDate.setDate(nextDate.getDate()+30);

    if(vDate.getTime()<now.getTime()||vDate.getTime()>nextDate.getTime()){
        layer.msg("游玩日期必须是未来30天内");
        return;
    }
    buyTicket(userName,userIdCard,userPhone,visiteDate);
});

//创建订单
function buyTicket(userName,userIdCard,userPhone,visiteDate) {
    var openid = window.localStorage.getItem("openid");
    var phoneNum = window.localStorage.getItem("phoneNum");
    if(!phoneNum){
        layer.msg("获取用户信息失败");
        return;
    }
    var paramStr = {};
    paramStr.phoneNum = phoneNum;
    paramStr.openid = openid;
    paramStr.totalAmount = payMoney;
    paramStr.typeId ="14";
    paramStr.ticketName = desc;
    paramStr.ticketType = type;
    paramStr.quantity = quantity;
    paramStr.points = points;
    paramStr.userName = userName;
    paramStr.userIdCard = userIdCard;
    paramStr.userPhone = userPhone;
    paramStr.visiteDate = visiteDate;

    var params = {};
    params.paramStr = JSON.stringify(paramStr);

    Common.ajaxWithParam("/fenful/api/v1/common/weixinCreateOrder", params, function(data) {
        console.log(data);
        var paramStr = {};
        paramStr.appId = data.appId;
        paramStr.timeStamp = data.timeStamp;
        paramStr.nonceStr = data.nonce_str;
        paramStr.package = data.prepay_id;
        paramStr.signType = data.signType;
        paramStr.paySign = data.sign;
        recharge(paramStr);
    });
}

function recharge(paramStr) {

    WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
            "appId": paramStr.appId, //公众号名称，由商户传入
            "timeStamp": paramStr.timeStamp, //时间戳，自1970年以来的秒数
            "nonceStr": paramStr.nonceStr, //随机串
            "package": paramStr.package,
            "signType": paramStr.signType, //微信签名方式：
            "paySign": paramStr.paySign //微信签名
        },
        function(result) {
            if(result.err_msg == "get_brand_wcpay_request:cancel") {
                layer.alert("您取消了支付！");
            } else {
                layer.alert("支付成功！");
                window.location.href=Common.WEB_PATH+"/fenful/h5/wzlh5/index.html";
                //跳转页面
                //location.href = "http://dev-api.fenful.com/fenful/h5/rechargeInfo.html?phoneNum="+$('#phoneNum').val();
            }
        }
    );
}

</script>
</body>
</html>